<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="riverSupervisorForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-xs-6 col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河长名称：</label>
                <div class="col-md-12">
                  <input id="bean-name" name="name" v-model="item.name" class="form-control" type="text"
                      placeholder="请输入河长名称" required="" aria-required="true" aria-describedby="bean-name-error"
                      maxlength="255" aria-invalid="true">
                  <span id="bean-name-error" class="help-block m-b-none" for="bean-name"></span>
                </div>
              </div>
            </div>
            <div class="col-xs-6 col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河长类型：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择河长类型" id="bean-type" name="type" class="form-control" required=""
                      aria-required="true" aria-describedby="bean-type-error" aria-invalid="true">
                    <option value="1" :selected="item.type == 1">河长</option>
                    <option value="18" :selected="item.type == 18">总河长</option>
                    <option value="19" :selected="item.type == 19">副总河长</option>
                  </select>
                  <span id="bean-type-error" class="help-block m-b-none" for="bean-type"></span>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-md-12">
              <vue-area
                  areaId="areaId"
                  areaName="areaName"
                  :areaIdVal="item.areaId||staff.dto().areaId"
                  :areaNameVal="item.areaName||staff.dto().areaName"
                  :areaFixed="item.areaId||staff.dto().areaId"
                  :selectBy="item.areaId||staff.dto().areaId"
                  areaRequired="true,true,false,false,false"
              ></vue-area>
            </div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河长性别：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择河长性别" id="bean-gender" name="gender" class="form-control" required="" aria-required="true" aria-describedby="bean-gender-error" aria-invalid="true">
                    <option value="">--请选择河长性别--</option>
                    <option value="0" :selected="item.gender == 0">男</option>
                    <option value="1" :selected="item.gender == 1">女</option>
                  </select>
                  <span id="bean-gender-error" class="help-block m-b-none" for="bean-gender"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河长电话：</label>
                <div class="col-md-12">
                  <input id="bean-cellphone" name="cellphone" v-model="item.cellphone" class="form-control" type="text" placeholder="请输入河长电话" required="" aria-describedby="bean-cellphone-error" maxlength="25" aria-invalid="true">
                  <span id="bean-cellphone-error" class="help-block m-b-none" for="bean-cellphone"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">联系单位电话：</label>
                <div class="col-md-12">
                  <input id="bean-unitCellphone" name="unitCellphone" v-model="item.unitCellphone" class="form-control" type="text" placeholder="请输入联系单位电话" aria-describedby="bean-unitCellphone-error" maxlength="25" aria-invalid="true">
                  <span id="bean-unitCellphone-error" class="help-block m-b-none" for="bean-unitCellphone"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">联系部门：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择联系部门" id="bean-orgId" name="orgId" class="form-control" aria-describedby="bean-orgId-error" aria-invalid="true">
                    <option value="">--请选择联系部门--</option>
                    <option :value="orgItem.id" :selected="item.orgId == orgItem.id" v-for="orgItem in orgItems">{{ orgItem.name }}</option>
                  </select>
                  <span id="bean-orgId-error" class="help-block m-b-none" for="bean-orgId"></span>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河长单位：</label>
                <div class="col-md-12">
                  <input id="bean-unitName" name="unitName" v-model="item.unitName" class="form-control" type="text" placeholder="请输入河长单位" aria-describedby="bean-unitName-error" maxlength="55" aria-invalid="true">
                  <span id="bean-unitName-error" class="help-block m-b-none" for="bean-unitName"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河长职务：</label>
                <div class="col-md-12">
                  <input id="bean-job" name="job" v-model="item.job" class="form-control" type="text"
                      placeholder="请输入河长职务" required="" aria-required="true" aria-describedby="bean-job-error"
                      maxlength="55" aria-invalid="true">
                  <span id="bean-job-error" class="help-block m-b-none" for="bean-job"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河长账号：</label>
                <div class="col-md-12">
                  <input id="bean-account" :disabled="newFlag!=0" name="account" v-model="item.account"
                      class="form-control" type="text" placeholder="请输入河长账号" required="" aria-required="true"
                      aria-describedby="bean-account-error" maxlength="55" aria-invalid="true">
                  <span id="bean-account-error" class="help-block m-b-none" for="bean-account"></span>
                </div>
              </div>
              <div v-if="newFlag==0">
                <div class="form-group clearfix">
                  <label class="col-md-8 control-label">初始密码：</label>
                  <div class="col-md-12">
                    <input id="a_password" name="password" type="hidden"/>
                    <input id="bean-password" v-model="item.password" class="form-control" type="password"
                        placeholder="请输入河长密码" required="" aria-required="true" aria-describedby="bean-password-error"
                        maxlength="64" aria-invalid="true">
                    <span id="bean-password-error" class="help-block m-b-none" for="bean-password"></span>
                  </div>
                </div>
                <div class="form-group clearfix">
                  <label class="col-md-8 control-label">确认密码：</label>
                  <div class="col-md-12">
                    <input id="a_confirmPassword" name="confirmPassword" type="hidden"/>
                    <input id="bean-confirmPassword" equalTo="#bean-password" v-model="item.confirmPassword"
                        class="form-control" type="password" placeholder="请再次输入密码" required="" aria-required="true"
                        aria-describedby="bean-confirmPassword-error" maxlength="64" aria-invalid="true">
                    <span id="bean-confirmPassword-error" class="help-block m-b-none" for="bean-confirmPassword"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-md-12">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">管辖河道：</label>
                <div class="col-md-12">
                  <div class="form-control" style="height: auto;">
                    {{ item.riverName || '--' }}
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

import vueArea from '@/components/vue-area'

export default {
  components: {
    'vue-area': vueArea
  },
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: '',
      orgItems: [],
      rivers: []
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#riverSupervisorForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.riverSupervisor.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.riverSupervisor.info)) {
        that.info();
      }
      that.getOrgItems();
      that.riverList();
    });
  },
  methods: {
    info() {
      let that = this;
      axios.get(site.riverSupervisor.info + sessionStorage.getItem(site.riverSupervisor.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    getOrgItems() {
      let that = this;
      axios.post(site.orgInfo.list, {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.orgItems = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    riverList() {
      // let that = this;
      // axios.get(site.riverInfo.list, {}).then(function (response) {
      //   var result = response.data;
      //   if (result.code === 0) {
      //     that.rivers = result.data;
      //   } else {
      //     alert(result.message);
      //   }
      // });
    },
    save() {
      let that = this;
      if ($('#riverSupervisorForm').valid()) {
        that.staff.encrypt(function (encrypt) {
          $('#a_password').val(that.crypto.encrypt(encrypt.key, that.crypto.md5(that.item.password)));
          $('#a_confirmPassword').val(that.crypto.encrypt(encrypt.key, that.crypto.md5(that.item.confirmPassword)));
          let dataFormObj = $('#riverSupervisorForm').serializeObject();
          dataFormObj.riverName = $('#bean-riverId').find('option:selected').text().replace(/[\r\n]/g, '');
          dataFormObj.orgName = $('#bean-orgId').find('option:selected').text().replace(/[\r\n]/g, '');
          axios.post(site.riverSupervisor.save, $.param(dataFormObj, true)
              , axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              parent.$vueApp.page();
              alert('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        });
      }
    }
  }
}
</script>
